<template>
  <div class="page">
    <div class="bd-b">
      <div class="weui-flex v-mdl pd">
        <div style="padding-right: 13px;">
          <cbx :checked="isCheckAll"></cbx>
        </div>
        <div>
          <span @tap="isCheckAll = !isCheckAll">{{!isCheckAll ? '全选' : '取消全选'}}</span>
        </div>
        <div class="weui-flex__item">
          <div class="cf">
            <notify-btn cls="ui btn link c-primary fr" @hit="onDel" :slotData="slotData">删除({{slotData.selectedIds.length}})</notify-btn>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="weui-cells weui-cells_after-title">
        <div class="weui-cell" v-for="n in members" :key="index" @tap="onCheck(n.id)">
          <div class="weui-cell__hd pdr">
            <cbx :checked="n.checked"></cbx>
          </div>
          <div v-if="n.avatarUrl">
            <div style="width: 36px;"><avatar :src="n.avatarUrl"></avatar></div>
          </div>
          <div class="weui-cell__bd pdl">
            {{n.name}}
            <span v-if="n.roleName != '本人'">({{n.roleName}})</span>
          </div>
        </div>
      </div>
    </div>
    <cfm v-model="isShowDeleteConfirm">
      <div class="ta-c pd-l">
        <div>确定要删除吗?</div>
        <div>删除后需要再次邀请才能加入</div>
      </div>
    </cfm>
    <page-common></page-common>
  </div>
</template>

<script>
import Avatar from '@/components/avatar'
import NotifyBtn from '@/components/notify-btn'
import Cbx from '@/components/cbx'
import { mapGetters, mapActions } from 'vuex'
import * as $group from '@/api/group'
import PageCommon from '@/components/page-common'
import Cfm from '@/components/cfm'

export default {
  data () {
    return {
      selectedIds: [],
      isCheckAll: false,
      isShowDeleteConfirm: ''
    }
  },
  components: {
    Avatar,
    Cbx,
    NotifyBtn,
    PageCommon,
    Cfm
  },
  computed: {
    ...mapGetters([
      'group',
    ]),
    members () {
      let kvRoleName = {
        'user': '本人',
        'father': '爸爸',
        'mather': '妈妈'
      }
      let t = []
      this.group.members.forEach(n => {
        let roleName = kvRoleName[n.role]
        t.push({
          name: n.name || n.nickName,
          id: n.userId,
          avatarUrl: n.avatarUrl,
          role: n.role,
          roleName,
          checked: this.selectedIds.indexOf(n.userId) >= 0
        })
      })
      return t
    },
    slotData () {
      return {
        selectedIds: this.selectedIds
      }
    }
  },
  methods: {
    ...mapActions([
      'getGroupById',
    ]),
    ...mapActions('group', [
      'removeMembersByIds',
    ]),
    onCheck (id) {
      if (this.selectedIds.indexOf(id) >= 0) {
        let t = []
        this.selectedIds.forEach(n => {
          if (n === id) return
          t.push(n)
        })
        this.selectedIds = t
        return
      }
      this.selectedIds.push(id)
    },
    onDel () {
      if (this.selectedIds.length === 0) return
      this.isShowDeleteConfirm = 'show'
    },
    onCancel () {
      wx.navigateBack()
    }
  },
  watch: {
    async isShowDeleteConfirm (nv) {
      if (nv !== 'ok') return
      let that = this
      try {
        await $group.removeMembersByIds(that.group.id, that.selectedIds)
        await that.getGroupById({groupId: that.group.id, cache: true})
        that.selectedIds = []
        that.$store.commit('UI_SET_TOAST_SUCCESS_MSG', '删除成功')
      } catch (e) {
        this.$debug({err: e})
      }
    },
    selectedIds (nv) {
      if (nv.length === this.members.length) {
        this.isCheckAll = true
      } else {
        this.isCheckAll = false
      }
    },
    isCheckAll (nv) {
      if (!nv) {
        this.selectedIds = []
        return
      }
      let t = []
      this.group.users.forEach(n => {
        t.push(parseInt(n.id))
      })
      this.selectedIds = t
    }
  }
}
</script>

<style scoped lang="less">
</style>
